<template>
	<view class="mall-bg">
		<view class="top-bar">
			
		</view>
		<!-- 搜索 -->
		<view class="cu-bar search nav-list">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input :adjust-position="false" type="text" placeholder="请输入商品名" @tap="toSearch()"></input>
			</view>
			<view class="text-black location-item" @tap="toSelectArea()" v-if="selectCommunityName">
				<text class="cuIcon-location"></text>{{selectCommunityName}}
			</view>
		</view>
		
		<view class="padding-lr-sm">
			<!-- 广告 -->
			<view class="index-ad">
				<image src="https://txhcoss.oss-cn-hangzhou.aliyuncs.com/kaifa/images/ad2.png" mode="widthFix" class="ad-img"></image>
			</view>
			<!-- <vc-ads></vc-ads> -->
			<!-- 店铺类型 -->
			<vc-category :category-list="categoryList"></vc-category>
			
			<!-- <vc-recommend ref="vcRecommendRef"></vc-recommend> -->
			<vc-shop ref="vcShopRef"></vc-shop>
		</view>
		<view>
			<community-recommend></community-recommend>
		</view>
		<view>
			<seckill-view ref="seckillViewRef"></seckill-view>
		</view>
		<view>
			<group-view ref="groupViewRef"></group-view>
		</view>

		<vc-bottom-black></vc-bottom-black>

		
	</view>
</template>

<script>
	import fixedSearch from '../../components/fixed-search/fixed-search.vue';

	import vcCategory from '@/components/vc-category/vc-category.vue'

	import vcShop from '@/components/vc-shop/vc-shop.vue'

	import vcRecommend from '@/components/vc-recommend/vc-recommend.vue'

	import vcAds from '@/components/vc-ads/vc-ads.vue'

	import vcBottomBlack from '@/components/vc-bottom-black/vc-bottom-black.vue';

	import groupView from '@/components/index/group-view.vue';
	import seckillView from '@/components/index/seckill-view.vue';


	import param from '../../constant/param.js';

	import tabBar from '@/components/TabBar/TabBar.vue'
	import communityRecommend from '@/components/community-recommend.vue'

	import {
		getMallIndexCategoryList,
		queryShopType
	} from '../../api/index/indexApi.js'
	import {
		getCommunityId,
		getCommunityById
	} from '../../api/community/communityApi.js';
	import {
		sliceArray
	} from '../../lib/java110/utils/ArrayUtil.js';
	import conf from '@/conf/config.js';
	import indexHousekeeping from '../../components/index/index-housekeeping.vue';
	export default {
		data() {
			return {
				navList: [],
				selectCommunityName: "",
				communityId: '',
				categoryList: [],
				addlistdata: [{
					title: "我的发布",
					src: conf.commonBaseUrl + "h5/static/images/market_my.png"
				}],
				shopTypeId: "0",
			}
		},
		components: {
			vcCategory,
			vcRecommend,
			vcAds,
			vcShop,
			vcBottomBlack,
			groupView,
			seckillView,
			tabBar,
			indexHousekeeping,
			communityRecommend
		},
		async onLoad(options) {
			await this.vc.onLoad(options).then(_suc => {}, _err => {});
			uni.removeStorageSync("ShopIndex");
			let _that = this;
			// #ifdef MP
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#fe3b0f',
			})
			// #endif
			this.communityId = options.communityId;

			this.categoryList = this._getCategoryList();
			this.vc.setStorageSync('mallIndexRefresh', '1');
			setTimeout(function(){
				_that.$refs.seckillViewRef.initSeckill('');
				_that.$refs.groupViewRef.initGroup('');
			},1000);
		},
		onShow: function() {
			let _mallIndexRefresh = this.vc.getStorageSync('mallIndexRefresh');
			this.communityId = getCommunityId();
			this._loadCommunityById(this.communityId);
			if (!this.communityId) {
				let community = uni.getStorageSync("_selectCommunity");
				if (community) {
					this.communityId = community.communityId;
					this.selectCommunityName = community.name;
				}
			}
			if (_mallIndexRefresh != '1') {
				this.$refs.vcShopRef._loadCommunityShops();
				if(this.$refs.vcRecommendRef) this.$refs.vcRecommendRef._loadRecommendProdcut();
				return;
			}
			this.vc.setStorageSync('mallIndexRefresh', '0');
		},
		methods: {
			changeNav(index) {
				let shopTypeId = this.navList[index].shopTypeId;
				this.shopTypeId = shopTypeId;
				if (this.shopTypeId == 0) {
					return; //首页不跳转
				}
				let _communityId = '';
				if(this.communityId){
					_communityId = this.communityId;
				}
				this.vc.navigateTo({
					url: '/pages/market/market?typeId=' + shopTypeId+"&communityId="+_communityId
				})
			},
			_loadCommunityById(communityId) {
				let that = this;
				getCommunityById(communityId).then(_data => {
					let _community = _data;
					if (!_community) {
						return;
					}
					that.selectCommunityName = _community.name;
					uni.setStorageSync("_selectCommunity", _community);
				})
			},
			_getCategoryList() {
				let _that = this
				let params = {
					page: 1,
					row: 100,
					isShow: "Y",
					shopId: param.SHOP_ID_GLOBAL,
					typeCd: param.MENU_TYPE.SHOP
				}
				getMallIndexCategoryList(params)
					.then(function(result) {
						let categoryData = result.data
						_that.categoryList = sliceArray(categoryData, 8)
					});
				params = {
					page: 1,
					row: 100
				}
				queryShopType(params)
					.then(function(result) {
						_that.navList = result.data
						_that.navList.unshift({
							"shopTypeId": "0",
							"typeName": "首页"
						})
					})
			},

			//搜索跳转
			toSearch(e) {
				this.vc.navigateTo({
					url: `/pages/goods/HM-search?searchType=3`
				}, true)
			},
			//切换小区
			toSelectArea(e) {
				this.vc.navigateTo({
					url: `/pages/selectcommunity/selectcommunity`
				}, true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "uview-ui/index.scss";
	.mall-bg{
		background-image: url("https://txhcoss.oss-cn-hangzhou.aliyuncs.com/kaifa/images/mall-bg1.png");
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	.top-bar{		
		display: flex;
		justify-content: space-between;
	}
	.location-item{
		padding: 20rpx;
	}
	.cart-box{
		padding: 20rpx;
		position: relative;
	}
	.cart-num{
		position: absolute;
		right: 10rpx;
		top: 8rpx;
		padding: 0 10rpx;
		height: 24rpx;
		border-radius: 24rpx;
		font-size: 10rpx;
		color: #FFFFFF;
		background-color: #ff0000;
		text-align: center;
		line-height: 24rpx;
	}
	.index-ad{
		display: flex;
		justify-content: center;
	}
	.nav-list {
	}

	.nav-scroll {
	}

	.nav-cur {
		font-weight: bold;
		border-bottom: 1px solid #FFFFFF;
	}

	.cu-item {
		height: 80upx;
	}
</style>